<!-- 工具条 -->
<template>
  <div>
    <el-button-group class="ml-4 top-tool-bar">
      <el-Button class="zz-tool-btn" type="primary" v-for="item in buttonlist" :key="item.id"
        @click="onBtnClick(item)">
        {{ item.label }}
      </el-Button>
    </el-button-group>
    <Tools v-if="showTool" @close="showTool=!showTool"></Tools>
    <Plot v-if="showPlot" @close="showPlot=!showPlot"></Plot>
    <SceneConfig v-if="showSettings" @close="showSettings=!showSettings"></SceneConfig>
    <Add3DTiles v-if="showAdd3dTiles" @close="showAdd3dTiles=!showAdd3dTiles"></Add3DTiles>
    <Property v-if="showProperty" @close="showProperty=!showProperty"></Property>
  </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
    components: {
    'Tools': () => import(`../components/tools.vue`),
    'Plot': () => import(`../components/Plot.vue`),
    'SceneConfig': () => import(`../components/sceneConfig.vue`),
    'Add3DTiles': () => import(`../components/Add3DTiles.vue`),
    'Property': () => import(`../components/Property.vue`)
},
    data() {
        return {
            buttonlist: [ 
              { name: 'settings', label:'设置' }, 
              { name: 'add3dTiles', label:'添加' }, 
              { name: 'property', label:'属性' },
              { name: "plot", label: "标绘"},
              { name: "tools", label: "工具"},
            ],
            showTool:false,
            showPlot:false,
            showSettings:false,
            showAdd3dTiles:false,
            showProperty:false
        }
    },
    methods: {
        onBtnClick(item) {
              switch (item.name) {
                case 'tools':
                  this.showTool = !this.showTool
                  break;
                case 'plot':
                  this.showPlot = !this.showPlot
                  break;
                case 'settings':
                  this.showSettings = !this.showSettings
                  break;
                case 'add3dTiles':
                  this.showAdd3dTiles = !this.showAdd3dTiles
                  break;
                case 'property':
                  this.showProperty = !this.showProperty
                  break;
                default:
                  Message.warn("暂未开发！")
                  break;
              }
        }
    },
    mounted() {
    },
}


</script>

<style scoped>
.top-tool-bar {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 999;
  background-color: rgba(0,0,0,0.5);
  border: 1px solid rgb(0,0,0);
  border-radius: 4px;
}
.el-button--primary{
  color: white !important;
  background-color: rgba(0,0,0,0.5) !important;
  border: 1px solid rgb(0,0,0)
}
.zz-tool-btn{
  border-radius:2px;
}
</style>
